<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form v-bind="formLayout">
        <a-row :gutter="48">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="申报体系">
              <a-select
                v-model="declarationSystemId"
                :allowClear="true"
                placeholder="请选择申报体系"
                @change="getData()"
              >
                <a-select-option v-for="item in systemList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="组织名称"
              style="margin-bottom: 10px">
              <a-input v-model="queryParam.keyword" placeholder="请输入组织名称" @keyup.enter.native="getList(true)" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="组织类别"
              style="margin-bottom: 10px">
              <a-select
                placeholder="请选择组织类别"
                v-model="queryParam.socialOrganizationTypeId"
                :allowClear="true"
                @change="getList(true)"
              >
                <a-select-option v-for="item in types" :key="item.id" :value="item.id">{{ item.type }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="申请级别"
              style="margin-bottom: 10px">
              <a-select
                placeholder="请选择申请级别"
                v-model="queryParam.declarationLevelId"
                :allowClear="true"
                @change="getList(true)"
              >
                <a-select-option v-for="item in levels" :key="item.id" :value="item.id"> {{ item.level }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[48,0]">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="进度状况"
              style="margin-bottom: 10px">
              <a-select
                placeholder="请选择进度状况"
                v-model="queryParam.rate"
                :allowClear="true"
                @change="getList(true)"
              >
                <a-select-option :value="0">未填报</a-select-option>
                <a-select-option :value="1">填报中</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="主管单位"
              style="margin-bottom: 10px">
              <a-select
                placeholder="请选择主管单位"
                v-model="queryParam.unitInfoId"
                :allowClear="true"
                @change="getList(true)"
              >
                <a-select-option v-for="item in unitList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="排序规则"
              style="margin-bottom: 10px">
              <a-select
                placeholder="请选择排序规则"
                v-model="queryParam.orderbyString"
                :allowClear="true"
                @change="getList(true)"
              >
                <a-select-option :value="1">填报时间升序</a-select-option>
                <a-select-option :value="2">填报时间降序</a-select-option>
                <a-select-option :value="3">自测得分升序</a-select-option>
                <a-select-option :value="4">自测得分降序</a-select-option>
                <a-select-option :value="5">指导的分升序</a-select-option>
                <a-select-option :value="6">指导的分降序</a-select-option>
                <a-select-option :value="7">编码升序</a-select-option>
                <a-select-option :value="8">编码降序</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <div class="btnBox">
              <a-button type="primary" @click="getList(true)" >查询</a-button>
              <a-button style="margin-left: 8px" @click="setEmpty">重置</a-button>
              <a-button style="margin-left: 8px" @click="exportData">导出</a-button>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="[48,0]" >
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item
              label="数量统计"
              style="margin-bottom: 0px"
            >
              <span style="white-space:nowrap;">
                <span style="color: #0084FE">组织数量：{{ tj.countUser }}</span>
                <!-- <a-divider type="vertical" />
                <span style="color: #FF9600">已审核数量：{{ tj.countShenghe }}</span> -->
                <a-divider type="vertical" />
                <span style="color: #FF9600">已填报数量：{{ tj.countTianbao }}</span>
              </span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-list :pagination="{showSizeChanger: true, current: this.current,pageSize: this.size, total: this.total, hideOnSinglePage: true, onChange: changePage, onShowSizeChange: changePage}">
      <a-list-item :key="item.id" v-for="item in data" @click="jumpDetail(item)">
        <div class="list-content">
          <div class="list-content-item">
            <div class="value title">{{ item.createUserName }}</div>
          </div>
          <div class="list-content-item">
            <div class="key">申请类别</div>
            <div class="value lb">{{ item.socialOrganizationType }}</div>
          </div>
          <div class="list-content-item" >
            <div class="key">自评得分</div>
            <div class="value df">{{ +item.recordSelfScoreSum }}/{{ item.managementTotalPoint }}</div>
          </div>
          <div class="list-content-item">
            <div class="key">申请级别</div>
            <div class="value">{{ item.declarationlevel }}</div>
          </div>
          <div class="list-content-item" >
            <div class="key">指导得分</div>
            <div class="value">{{ +item.recordScoreZhidaoSum || 0 }}</div>
          </div>
          <div class="list-content-item" >
            <div class="key">专家打分</div>
            <div class="value">{{ +item.recordScoreSum || 0 }}</div>
          </div>
          <div class="list-content-item">
            <div class="value jd">
              <div class="key">填报进度</div>
              <a-progress strokeColor="#FEA538" :percent="(item.recordCount/item.managementCount) | setDecimals" status="normal" />
            </div>
            <div class="value jd">
              <div class="key">评审进度</div>
              <a-progress strokeColor="#4674F6" :percent="(item.recordAnnotationCount/item.recordCount) | setDecimals" status="normal" />
            </div>
          </div>
          <div class="list-content-item" >
            <img src="@/assets/images/system/wcs.png" class="statusImg" v-if="item.status === 1"/>
            <img src="@/assets/images/system/wtg.png" class="statusImg" v-if="item.status === 2"/>
            <img src="@/assets/images/system/wtb.png" class="statusImg" v-if="item.status === 3 && item.recordCount === 0"/>
            <img src="@/assets/images/system/tbz.png" class="statusImg" v-if="item.status === 3 && item.recordCount > 0"/>
          </div>
        </div>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
import { getSystem, getOrganizationTypes, getDeclarationLevels } from '@/api/system'
import { getUnitList } from '@/api/unit'
import { getPageZhuanjia, exportData } from '@/api/score'
import moment from "moment"
export default {
  name: 'ScoreList',
  components: {
  },
  data () {
    this.formLayout = {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 18
      }
    }
    return {
      systemList: [],
      declarationSystemId: '',
      types: [],
      levels: [],
      unitList: [],
      queryParam: { },
      current: 1,
      size: 10,
      total: 0,
      data: [],
      tj: {
        countTianbao: 0,
        countUser: 0,
        countShenghe: 0
      }
    }
  },
  filters: {
    setDecimals (val) {
      return +((val * 100).toFixed(0))
    }
  },
  created () {
    this.getSystemList()
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    setEmpty () {
      this.queryParam = { }
      this.getList(true)
    },
    exportData() {
      this.$confirm({
        title: '提示',
        content: '是否确认导出数据？',
        okType: 'warning',
        onOk: () => {
          const requestParameters = Object.assign({}, { current: this.current, size: this.size, declarationSystemId: this.declarationSystemId }, this.queryParam)
          exportData(requestParameters).then(bold => {
            this.saveAs(bold, '组织统计列表' +  moment().format('YYYY-MM-DD'))
          })
        }
      })
    },
    saveAs(blob, filename) {
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = filename;
      link.click();
    },
    getSystemList () {
      getSystem({
        current: 1,
        size: 10000
      }).then(res => {
        this.systemList = res.records
        if (this.systemList.length > 0) {
          const cur = this.systemList.find(item => item.status === 2 || item.status === 3 || item.status === 4)
          if (cur) {
            this.declarationSystemId = cur.id
          } else {
            this.declarationSystemId = this.systemList[0].id
          }
          this.getData()
        }
      })
    },
    getData () {
      this.getList()
      this.getTypes()
      this.getLevels()
      this.getUnitList()
    },
    getTypes () {
      getOrganizationTypes({
        declarationSystemId: this.declarationSystemId
      })
      .then(res => {
        this.types = res
      })
    },
    getLevels () {
      getDeclarationLevels({
        declarationSystemId: this.declarationSystemId
      })
      .then(res => {
        this.levels = res
      })
    },
    getUnitList () {
      getUnitList()
          .then(res => {
            this.unitList = res
          })
    },
    changePage (page, pageSize) {
      this.current = page
      this.size = pageSize
      this.getList()
    },
    getList (isFirst) {
      if (isFirst) {
        this.current = 1
      }
      const requestParameters = Object.assign({}, { current: this.current, size: this.size, declarationSystemId: this.declarationSystemId }, this.queryParam)
      getPageZhuanjia(requestParameters)
      .then(res => {
        this.tj = {
          countTianbao: res.countTianbao,
          countUser: res.countUser,
          countShenghe: res.countShenghe
        }
        this.data = res.resultPage.records
        this.total = res.resultPage.total
      })
    },
    jumpDetail (info) {
      this.$router.push({
        name: 'ScoreDetail',
        query: {
          declarationInfoId: info.id,
          organizationName: info.createUserName
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.btnBox {
  width: 100%;
  .flex-end();
}
.list-content {
  width: 100%;
  .flex-between();
  .list-content-item {
      text-align: center;
      .key {
        font-size: 14px;
        color: rgba(153, 153, 153, 0.85);
        margin-bottom: 16px;
      }
      .value{
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
      }
      .title {
        width: 200px;
      }
      .lb {
        width: 170px;
      }
      .df {
        width: 100px;
      }
      .statusImg {
        height: 70px;
      }
      .jd {
        width: 300px;
        margin-bottom: 16px;
        .flex-center();
        .key {
          width: 100px;
          margin-right: 10px;
          margin-bottom: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
  }
}
@media (max-width: 1600px) {
  .list-content {
    .list-content-item {
        .title {
          width: 120px;
        }
        .jd {
          width: 200px;
        }
    }
  }
}
</style>
